<template>
	<view class="">
		<map style="width: 100%; height: 1472rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
			@callouttap='clickMarkers'>
			<cover-view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<cover-view class="map_data bgf br12" :marker-id="item.id">

						<cover-view class="c2a7 fw500 fs28 flex_x">
							<cover-view>待取货</cover-view>
							<cover-view class='ml24'>3</cover-view>
						</cover-view>

						<cover-view class="mt12 c3 fw500 fs24 cont">
							{{item.title.length>18 ? item.title.slice(0,17)+'...': item.title}}
						</cover-view>
					</cover-view>
				</block>

			</cover-view>
		</map>

		<view class="">
			<u-loading-page :loading="isLoading" loadingText='切换身份中'></u-loading-page>
			<tabbar :value="4"></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import tool from '../../../utils/tool/tool.js'
	export default {
		components: {},
		data() {
			return {

				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度

				markers: [{ // 标记点
					id: 1,
					latitude: 39.888,
					longitude: 116.39744,
					title: "这是服务点名称这是服务这是服务点名称这是服务这是服务点名称这是服务1",
					joinCluster: true,
					iconPath: '/static/orderMap/map.png',
					width: 25,
					height: 25,
					customCallout: {
						anchorY: -5, // Y轴偏移量
						anchorX: 0, // X轴偏移量
						display: "ALWAYS" // 一直展示
					},
				}, {
					id: 2,
					latitude: 39.890,
					longitude: 116.39750,
					title: "这是服务点名称这是服务这是服务点名称这是服务这是服务点名称这是服务2",
					joinCluster: true,
					iconPath: '/static/orderMap/map.png',
					width: 25,
					height: 25,
					customCallout: {
						anchorY: -5, // Y轴偏移量
						anchorX: 0, // X轴偏移量
						display: "ALWAYS" // 一直展示
					},
				}, {
					id: 3,
					latitude: 39.892,
					longitude: 116.39754,
					title: "这是服务点名称这是服务这是服务点名称这是服务这是服务点名称这是服务3",
					joinCluster: true,
					iconPath: '/static/orderMap/map.png',
					width: 25,
					height: 25,
					customCallout: {
						anchorY: -5,
						anchorX: 0,
						display: "ALWAYS"
					},
				}, {
					id: 4,
					latitude: 39.894,
					longitude: 116.39754,
					title: "这是服务点名称这是服务这是服务点名称这是服务这是服务点名称这是服务4",
					joinCluster: true,
					iconPath: '/static/orderMap/map.png',
					width: 25,
					height: 25,
					customCallout: {
						anchorY: -5,
						anchorX: 0,
						display: "ALWAYS"
					},
				}],
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUser()
			this.orderMap()
		},
		methods: {
			orderMap(){ //地图标点
				this.$api.orderMap().then(res=>{
					if(res.code == 1){
						
					}
				})
			},
			clickMarkers(e) { //点击标点
				// console.log(e.detail);
				this.markers.map(item => {
					if (item.id == e.detail.markerId) {
						console.log(item);
						tool.copyText('位置')
						// uni.openLocation({ //导航
						// 	latitude: Number(item.latitude),
						// 	longitude: Number(item.longitude),
						// 	name: item.title,
						// 	success: () => {
						// 		console.log('success');
						// 	}
						// });

					}
				})
			}
		},
		computed: {
			...mapState({
				identity: state => state.identity,
			})
		},
		watch: {
			identity: {
				handler(news) {
					console.log(news, 88);
					if (news) {

					}
				},
				deep: true,
				immediate: true,
			},
		}
	}
</script>

<style lang="scss" scoped>
	.map_data {
		width: 230upx;
		min-height: 110upx;
		box-shadow: 0px 2upx 4upx 1upx rgba(0, 0, 0, 0.2);
		padding: 17upx 20upx;

		.cont {
			white-space: normal;
		}
	}
</style>
